<template>
  <!-- 内容区域 -->
  <div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
      <h1>
        供应商管理
        <small>管理您的供应商</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-globe"></i> 供应商管理</a></li>
        <li><a href="#"> 供应商详情</a></li>
        <li class="active">修改供应商</li>
      </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">
      <!-- 修改密码 -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">修改供应商</h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form">
          <div class="box-body">
            <div class="form-group">
              <label for="vendorsId">供应商Id</label>
              <input type="text" class="form-control" id="vendorsId" placeholder="供应商Id" :value="vendors.id" data-cip-id="vendorsId" disabled>
            </div>
            <div class="form-group">
              <label for="vendorsName">名称</label>
              <input type="text" class="form-control" id="vendorsName" placeholder="名称" :value="vendors.name" data-cip-id="vendorsName">
            </div>
            <div class="form-group">
              <label for="vendorsLocation">地址</label>
              <input type="text" class="form-control" id="vendorsLocation" placeholder="地址" :value="vendors.location" data-cip-id="vendorsLocation">
            </div>
            <div class="form-group">
              <label for="vendorsContact">联系方式</label>
              <input type="text" class="form-control" id="vendorsContact" placeholder="联系方式" :value="vendors.contact" data-cip-id="vendorsContact">
            </div>
            <div>
              <p class="alert alert-danger hidden" id="message">message</p>
            </div>
          </div>
          <!-- /.box-body -->
          <div class="box-footer">
            <button type="button" class="btn btn-primary" @click="change">提交修改</button>
          </div>
        </form>
      </div>
      <!-- /.row -->
    </section>
    <!-- 正文区域 /-->

  </div>
  <!-- 内容区域 /-->
</template>

<script>
export default {
  name: "ChangeVendors",
  data(){
    return {
      vendors: this.GLOBAL.appData.vendorsList[(this.$route.params.id)-1]
    }
  },
  methods:{
    change(){
      var vendorsName= document.getElementById("vendorsName");
      var vendorsLocation= document.getElementById("vendorsLocation");
      var vendorsContact= document.getElementById("vendorsContact");
      if(vendorsName.value===""||vendorsLocation.value===""||vendorsContact.value===""){
        //输入有空值
        this.$message.warning("供应商信息不能有空值！");
      }
      else {
        this.GLOBAL.appData.vendorsList[(this.$route.params.id)-1].name = vendorsName.value;
        this.GLOBAL.appData.vendorsList[(this.$route.params.id)-1].location = vendorsLocation.value;
        this.GLOBAL.appData.vendorsList[(this.$route.params.id)-1].contact = vendorsContact.value;
        this.$message.info("修改成功（模拟操作）");
        this.$router.push("/main/vendorsData")
      }
    }
  },
  mounted() {
    $(document).ready(function () {
      // 选择框
      $(".select2").select2();

      // WYSIHTML5编辑器
      $(".textarea").wysihtml5({
        locale: 'zh-CN'
      });
    });
  }
}
</script>

<style scoped>

</style>
